<!-- 首页顶栏 -->
<template>
	<div id="home_header">
		<mt-header :title="title" :fixed="is_fixed" class="mt-header-g">
			<router-link to="##" slot="left">
				<mt-button icon="more" @click.native="showSlideFn()"></mt-button>    <!--showSlideFn()显示侧栏的方法-->     <!--@click.native：相当于js的点击事件-->
			</router-link>
			<mt-button slot="right" @click.native="refreshFn()">
			                  <!--refreshFn()点击刷新-->
				<img src="../../assets/img/refresh.png" alt="" width="20" height="20" class="img-g">
			</mt-button>
		</mt-header>
	</div>
</template>

<script>
import Vue from 'vue'
import { Header } from 'mint-ui';
import { Button } from 'mint-ui';
import { mapMutations } from 'vuex'

Vue.component('mt-button', Button);
Vue.component('mt-header', Header);
export default {
	name: 'home_header',
	data () {
		return {
		 	is_fixed : true,
		}
	},
	computed : {
		title(){
			return this.$store.state.title
		}
	},
	methods : {
		//显示侧栏
		showSlideFn(){
			this.$store.commit({
				type :'showSlideFn',
			})		
		},
		//点击刷新
		refreshFn(){
			console.log("点击了刷新按钮")
			this.$store.commit({
				type : 'changeRefreshName',
				refreshName : this.$route.path
			})
		}		
	}
}
</script>

<style>
	#home_header {
		margin-bottom: 40px;
	}
    #home_header  .img-g:hover{
        cursor:pointer;
    }
    #home_header  .mt-header-g{
        font-weight: bold;
        font-size: 25px;
    }
</style>
